Mobility Mapper Business Portal

The purpose of this project is to provide a business portal that integrates with the Mobility Mapper platform, which generates accessible routes for users of wheeled mobility devices.

The portal provides a user-friendly interface for accessible businesses to create a listing, so they appear in search results on the Mobility Mapper platform. The listing includes details about their accessibility features, location, and contact information.

The portal allows businesses to select from different membership tiers, each offering varying levels of visibility and benefits on the Mobility Mapper platform.

Businesses can request verification of their accessibility features, which involves wheelers visiting the business to assess and confirm the features listed. Verified businesses receive a badge on their listing, enhancing their credibility and attractiveness to users seeking accessible options.

Visit the deployed website here.

Table of Contents

User Experience (UX)

Project Goals

User Goals

  1. Create an account
    As a User I want to register an account so that I can access all portal features.

  2. Edit my profile
    As a User, I want to be able to update my personal details, change my password, and manage my profile photo so that my account information is always current.

  3. Contact support
    As a User, I want to contact the Mobility Mapper team for help, feedback, or suggestions.

  4. Register a business
    As a Business Owner, I want to register my business so that it can be listed on the Mobility Mapper platform, found by wheelers, and managed through my dashboard.

  5. Manage business details
    As a Business Owner, I want to add, edit, or remove my business details, including address, categories, accessibility features, opening hours, and special offers, so that my information is always accurate and up to date.

  6. Manage membership tier
    As a Business Owner, I want to be able to view and upgrade my membership tier so I can unlock more features and increase my business’s visibility in search results.

  7. Request accessibility verification
    As a Business Owner, I want to request independent verification of my business’s accessibility features by verified wheelers, so I can earn a "Verified by Wheelers" badge and attract more customers.

  8. Track verification progress and reports
    As a Business Owner, I want to view the status of my verification request and access completed verification reports, so I can see detailed feedback.

  9. View and manage dashboard and membership status
    As a Business Owner, I want to access a dashboard showing my business details, membership status, payment history, and verification progress, so I can manage everything in one place.

  10. Make secure payments
    As a Business Owner, I want to pay for memberships or verification fees securely online using Stripe, and receive receipts and payment confirmations.

  11. Search for accessible businesses
    As a Wheeler, I want to search for accessible businesses using filters, categories, accessibility features, and an interactive map, so I can find suitable venues in my area.

  12. View detailed business listings and verification status
    As a User, I want to see comprehensive business listings, including accessibility features, opening hours, verification badges, and membership tier, so I can make informed choices.

  13. Apply to verify accessible businesses
    As a Wheeler, I want to browse available verification requests, apply to verify businesses, and receive approval so I can contribute to the community and earn rewards.

  14. Track and manage verification applications
    As a Wheeler, I want to view the status of my verification applications and see which businesses I am approved to verify, so I can plan my visits and manage my activity.

  15. Submit on-site verification reports
    As a Wheeler, I want to submit detailed verification reports while visiting a business, including notes, accessibility feature confirmations, and photo evidence linked to specific features.

  16. Track my verification history and activity
    As a Wheeler, I want to view my verification applications, links to report forms and business details, submitted reports, and earned rewards in a dedicated hub.

  17. Receive clear feedback and error messages
    As a User, I want to see clear success, error, and validation messages throughout the portal, so I always know the outcome of my actions.

Structure of the Mobility Mapper Business Portal

The structure of the Mobility Mapper Business Portal is illustrated in the diagram below. The main entry point is the Loading Page, where users can choose to sign up, sign in, or contact support. Once signed in, users are directed to their personal dashboard, which serves as the central hub for both business users and wheelers.

From the personal dashboard, users can access key features such as searching for accessible businesses, viewing and editing their profile, and changing their password.

Business users have the option to register a business, and select a membership tier. If the membership is paid, they proceed to checkout. They will then have access to a dedicated Business Owner Dashboard. Here, they can manage their business details, view or upgrade their membership tier, and request verification of their accessibility features.

The checkout process is integrated for membership upgrades (solid line) and verification requests (dashed line), with secure payment handled via Stripe.

The business search and map functionality is available to all logged-in users, allowing them to filter and explore accessible venues. Each business listing provides detailed information, including accessibility features and verification status. The level of detail and visibility is determined by the business's membership tier.

For businesses that have requested verification of their accessibility features, their listing in the search results contains a link for wheelers to apply to carry out the verification. After submission, the wheeler can view the status of their application on the Accessibility Verification Hub.

Once approved, the wheeler can complete and submit the verification report form, for an admin to review and approve. Upon approval, both the wheeler and the business can view the completed verification report. After three wheelers have completed the verification process, the business receives a verified badge on their listing.

The structure is designed to maintain clear separation between business management and wheeler verification workflows, ensuring a seamless user experience for both user types.

Users can navigate between the various sections of the portal using a navigation bar, ensuring consistent access to all features. The contact form is accessible from the home page and throughout the site, providing support whenever needed.

There is a custom 404 error page for handling invalid URLs, ensuring users are guided back to the user dashboard.

Entity Relationship Diagram

The ERD below was created using Mermaid.

This relational database is managed by PostgreSQL with a PostGIS extension for the geospatial data used in business listings and search functionality.

erDiagram direction LR AUTH_USER { UUID id string username string email string password boolean is_active boolean is_staff datetime date_joined } USERPROFILE { UUID id UUID user_id string full_name string phone string role string avatar } BUSINESS { UUID id UUID owner_id string name string description string address string city string postcode geometry location UUID category_id UUID membership_tier_id boolean is_verified boolean is_active datetime created_at } BUSINESSCATEGORY { UUID id string name string description } MEMBERSHIPTIER { UUID id string name decimal price string description integer visibility_rank } ACCESSIBILITYFEATURE { UUID id string name string description } BUSINESS_ACCESSIBILITYFEATURE { UUID id UUID business_id UUID accessibilityfeature_id string value } WHEELER_VERIFICATION_APPLICATION { UUID id UUID business_id UUID wheeler_id string status datetime applied_at datetime approved_at } WHEELER_VERIFICATION_REPORT { UUID id UUID application_id UUID wheeler_id UUID business_id text notes datetime submitted_at boolean is_approved } VERIFICATION_PHOTO { UUID id UUID report_id UUID feature_id string image_url string caption } PAYMENT { UUID id UUID user_id UUID business_id UUID membership_tier_id decimal amount string stripe_payment_intent string status datetime created_at } AUTH_USER ||--o{ USERPROFILE : has USERPROFILE ||--o{ BUSINESS : owns BUSINESS }o--|| BUSINESSCATEGORY : category BUSINESS }o--|| MEMBERSHIPTIER : membership BUSINESS ||--o{ BUSINESS_ACCESSIBILITYFEATURE : has ACCESSIBILITYFEATURE ||--o{ BUSINESS_ACCESSIBILITYFEATURE : is BUSINESS ||--o{ WHEELER_VERIFICATION_APPLICATION : has USERPROFILE ||--o{ WHEELER_VERIFICATION_APPLICATION : applies WHEELER_VERIFICATION_APPLICATION ||--o{ WHEELER_VERIFICATION_REPORT : has USERPROFILE ||--o{ WHEELER_VERIFICATION_REPORT : submits BUSINESS ||--o{ WHEELER_VERIFICATION_REPORT : for WHEELER_VERIFICATION_REPORT ||--o{ VERIFICATION_PHOTO : includes ACCESSIBILITYFEATURE ||--o{ VERIFICATION_PHOTO : shows USERPROFILE ||--o{ PAYMENT : makes BUSINESS ||--o{ PAYMENT : for MEMBERSHIPTIER ||--o{ PAYMENT : upgrades

AuthUser Model Extends Django’s built-in user model to represent all users of the portal, including business owners and wheelers.

Attributes:

UserProfile Model Stores additional profile information for each user, including their role (business owner or wheeler).

Attributes:

Business Model Represents a business listed on the platform.

Attributes:

BusinessCategory Model Defines categories for businesses (e.g., café, shop).

Attributes:

MembershipTier Model Represents the different membership levels available to businesses.

Attributes:

AccessibilityFeature Model Lists possible accessibility features a business can have (e.g., step-free access, accessible toilet).

Attributes:

BusinessAccessibilityFeature Model Associates specific accessibility features with a business.

Attributes:

WheelerVerificationApplication Model Tracks applications by wheelers to verify a business’s accessibility.

Attributes:

WheelerVerificationReport Model Represents a verification report submitted by a wheeler after visiting a business.

Attributes:

VerificationPhoto Model Stores photos submitted as part of a verification report, optionally linked to a specific accessibility feature.

Attributes:

Payment Model Tracks payments made by users for memberships or verification requests.

Attributes:

Relationships:

Each user has one profile; each profile can own multiple businesses. Businesses belong to a category and a membership tier, and can have many accessibility features. Wheelers can apply to verify businesses and submit verification reports, which may include photos. Payments are linked to users, businesses, and membership tiers.

Wireframes

Wireframes were created using Balsamiq to plan the design of the web application.

Page Desktop Mobile
Landing Page Home desktop Home mobile
Sign Up Sign Up desktop Sign Up mobile
Personal Dashboard Dashboard desktop Dashboard mobile
Edit Profile Edit Profile desktop Edit Profile mobile
Accessible Business Search Search desktop Search mobile
Business Details Business Details desktop Business Details mobile
Register Business Register Biz desktop Register Biz mobile
Business Owner Dashboard Biz Dashboard desktop Biz Dashboard mobile
Upgrade Membership Membership desktop Membership mobile
Checkout Checkout desktop Checkout mobile
Request Wheeler Verification Request Wheeler Verification desktop Request Wheeler Verification mobile
Accessibility Verification Hub Verification Hub desktop Verification Hub mobile
Verification Application Verification App desktop Verification App mobile
Verification Report Form Report Form desktop Report Form mobile
Completed Verification Report Completed Report desktop Completed Report mobile

Colour Scheme

Colour scheme image

The colour scheme for this website matches that of the main Mobility Mapper platform, using burnt orange (#D35400) as the primary colour, complemented by mango, coffee, brown and khaki green.

Typography

The font used on the website is Open Sans with Sans Serif as the backup in case the former is not imported successfully.

Features

General

Navigation Bar & Sidebar Menu

Navbar Sidebar Menu User in Header

Home Page

Hero Image Introduction Call to Action Core Actions Testimonial

Registration & Authentication

Sign In Page Sign Up Page Sign Up Page Sign Up Page Sign Up Page Sign Up Page Verify Email Forgot Password Page Change Password Page Sign Out Page
Sign Out Message

Personal Dashboard

Profile Details

Profile Details Business Dashboard Link

Account Actions

Account Actions

Wheeler Verification Activity

Wheeler Verification Activity

Instructions & Incentives

Verification Process

Edit Profile Page

Profile Photo:

Edit Profile Page - photo

Personal Details:

Edit Profile Page - photo

User Roles:

Edit Profile Page - photo Edit Profile Page - photo Edit Profile Page - photo

Form Features:

Actions:

Edit Profile Page - photo Edit Profile Page - photo

Business Registration Page

Form Features:

Register Business Page s

Business Dashboard

Header Section

Business Details

Location Map

Description & Services

Accessibility Features

Opening Hours

Membership Tier

Accessibility Verification

Action Buttons

No Business Registered

Business Dashboard

Edit Business Page

<img alt="Edit Business Page" src="/readme-files/edit_business_desktop.png" style=

View Existing Membership Page

<img alt="View Existing Membership Page" src="/readme-files/view_existing_membership_desktop.png" style

Upgrade Membership Page

Upgrade Membership Page

Accessible Business Search & Map

Business Search

Accessibility Verification Workflow

Verification Hub Verification Report

Request Wheeler Verification Page

<img alt="Request Wheeler Verification Page" src="/readme-

Accessibility Verification Application Page

<img alt="Accessibility Verification Application Page" src="/readme-files/wheeler_verification_application_desktop.png" style

Accessibility Verification Application Submitted Page

Accessibility Verification Application Submitted Page

Accessibility Verification Hub

<img alt="Accessibility Verification Hub Page" src="/readme-files/accessibility_verification_hub_desktop.png"

Accessibility Verification Form Page

<img alt="Accessibility Verification Form Page" src="/readme-files/wheeler_verification_form_desktop.png" style=

Accessibility Verification Report Page

<img alt="Accessibility Verification Report Page" src="/readme-files/wheeler_verification_report_desktop.png" style

Business Listing Details Page

Business Listing Details Page

Payments & Membership

Checkout

Checkout Page

<img alt="Checkout Page" src="/readme-files/checkout_desktop.png"

Payment Success Page

<img alt="Payment Success Page" src="/readme-files/payment_success_desktop.png" style

Contact

Contact Page

Error Handling

404 Page

Back to top ⇧

Technologies Used

Languages Used

Libraries and Frameworks

Django Packages and Dependencies

Database Management

Tools and Programs

Back to top ⇧

Demo Data & Fake User/Business Generation

To support development, testing, and demonstration of the Mobility Mapper Business Portal, the project includes a robust system for generating realistic fake users, businesses, and associated verification data. This is achieved through a custom Python script and a set of fixture files.

Overview

How It Works

Fixtures Used

The script relies on several fixture files to provide lookup data and ensure consistency:

These fixtures are loaded into the database before running the fake data generation script, ensuring all foreign key relationships are valid.

Loading Demo Data

To load the demo data for development or testing:

  1. Load the base fixtures:
    python manage.py loaddata fixtures/accessibility_features.json fixtures/business_categories.json fixtures/membership_tiers.json fixtures/counties.json fixtures/age_groups.json fixtures/mobility_devices.json
    
    
    

Testing

Extensive testing documentation can be found here.

Deployment

This website was developed using Visual Studio Code, which was then committed and pushed to GitHub using the terminal.

Deploying on Heroku

To deploy this site to Heroku from its GitHub repository, take following steps:

  1. Update the settings.py file:

    Note that the following settings have already been added for deployment:

  2. In your project root, create a file named Procfile (no extension) with: web: gunicorn config.wsgi

  3. Push to GitHub

  4. Create the Heroku App:

  5. Provision Azure PostgreSQL Database

CREATE EXTENSION postgis;
  1. Configure Heroku to Use Azure PostgreSQL
postgres://<username>:<password>@<host>:5432/<database>?sslmode=require
  1. Go to your Stripe Dashboard and get
  1. Add the remaining environment variables:
  1. Add the Heroku Geo Buildpack to install the GIS libraries GDAL, GEOS and PROJ, which are required for the PostGIS database extension. Go to the CLI by clicking More > Run Console, and enter
heroku create --buildpack https://github.com/heroku/heroku-geo-buildpack.git
  1. Connect Heroku to GitHub
  1. Deploy the App
  1. Run Migrations and Create Superuser
python manage.py migrate
python manage.py createsuperuser
  1. Upload the Fixtures to the Database
python manage.py loaddata mapper/fixtures/*.json
  1. Visit the URL provided by Heroku to see your deployed app.

Forking the Repository

Forking a GitHub Repository makes a copy of the original repository on your GitHub account, which you can view and/or make changes without affecting the original repository. To fork a repository:

  1. Log into GitHub or create an account.
  2. Locate the GitHub Repository.
  3. At the top of the repository, on the right side of the page, select "Fork"
  4. You should now have a copy of the original repository in your GitHub account.

Creating a Clone

How to run this project within a local IDE, such as VSCode:

  1. Log into GitHub or create an account.
  2. Locate the GitHub Repository.
  3. Under the repository name, click "Clone or download".
  4. In the Clone under the HTTPs section, copy the clone URL for the repository.
  5. In your local IDE open the terminal.
  6. Change the current working directory to the location where you want the cloned directory to be made.
  7. Type 'git clone', and then paste the URL you copied in Step 3.
git clone https://github.com/SonyaJane/mobility-mapper-business-portal.git
  1. Press Enter. Your local clone will be created.

Further reading and troubleshooting on cloning a repository from GitHub here

Finished Product

Page Desktop Mobile
Landing Page Home Page Desktop Home Page Mobile
Contact Page Contact Page Desktop Contact Page Mobile
Sign Up Page Sign Up Page Desktop Sign Up Page Mobile
Sign In Page Sign In Page Desktop Sign In Page Mobile
Sign Out Page Sign Out Page Desktop Sign Out Page Mobile
Change Password Page Change Password Page Desktop Change Password Page Mobile
Reset Password Page Reset Password Page Desktop Reset Password Page Mobile
Personal Dashboard Personal Dashboard Desktop Personal Dashboard Mobile
Edit Profile Page Edit Profile Page Desktop Edit Profile Page Mobile
Register Business Page Register Business Page Desktop Register Business Page Mobile
Business Dashboard Business Dashboard Desktop Business Dashboard Mobile
Edit Business Page Edit Business Page Desktop Edit Business Page Mobile
Delete Business Page Delete Business Page Desktop Delete Business Page Mobile
Business Search Page Business Search Page Desktop Business Search Page Mobile
Request Verification Page Request Verification Page Desktop Request Verification Page Mobile
View membership Page View Membership Page Desktop View Membership Page Mobile
Upgrade Membership Page Upgrade Membership Page Desktop Upgrade Membership Page Mobile
Checkout Page Checkout Page Desktop Checkout Page Mobile
Payment Success Page Payment Success Page Desktop Payment Success Page Mobile
Business Search Page Business Search Map Page Desktop Business Search Map Page Mobile
Apply to Verify Accessibility Page Apply to Verify Accessibility Page Desktop Apply to Verify Accessibility Page Mobile
Application Submitted Page Application Submitted Page Desktop Application Submitted Page Mobile
Accessibility Verification Hub Page Accessibility Verification Hub Page Desktop Accessibility Verification Hub Page Mobile
Accessibility Verification Form Page Accessibility Verification Form Page Desktop Accessibility Verification Form Page Mobile
Accessibility Verification Report Page Accessibility Verification Report Page Desktop Accessibility Verification Report Page Mobile
Business Details Page Business Details Page Desktop Business Details Page Mobile
404 Error Page 404 Error Page Desktop 404 Error Page Mobile

Credits

Content

Media